<template>
	<el-button class="back" type="primary" size="large" @click="back"><el-icon><ArrowLeft/></el-icon>&nbsp;返回</el-button>
	<div class="content">
		<div class="left">
			<div class="cropper">
                <Cropper @changeAvatar='changeAvatar'></Cropper>
            </div>

			<el-descriptions title="个人信息" :column="1" size="large" border>
				<template #extra>
					<el-button type="primary" size="large">编辑个人信息</el-button>
				</template>
				<el-descriptions-item style="{width=40px}" label-align='center' label="昵称">{{userinfo.data.nickname}}</el-descriptions-item>
				<el-descriptions-item width='40px' label-align='center' label="用户名">{{userinfo.data.username}}</el-descriptions-item>
				<el-descriptions-item width='40px' label-align='center' label="联系电话">{{userinfo.data.phone}}</el-descriptions-item>
				<el-descriptions-item width='40px' label-align='center' label="邮箱地址">{{userinfo.data.email}}</el-descriptions-item>
			</el-descriptions>
			<div class="buttonBox">
				<el-button type="" size="large">取消</el-button>
				<el-button type="primary" size="large">保存信息</el-button>
			</div>
		</div>

		<img src="../assets/img/userInfo/self_Space.png">
	</div>

</template>
 
<script>
import Cropper from '../components/CropperImage.vue'
import request from '../api/request'
import { useRouter } from "vue-router"
import { reactive } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
export default {
	components: {
		Cropper,
        ArrowLeft
	},
	setup() {
		const router = useRouter()
		// 获取用户信息
		const userinfo = reactive({ data: {} })
		const getUserInfo = () => {
			request.get('/userMain').then((res) => {
				userinfo.data = res.data
				// 头像不为空，则获取头像
				if (res.data.picture) {
					userinfo.data.picture = res.data.picture
				} else {
					userinfo.data.picture = '../../public/img/defaultPicture.png'
				}
				console.log(userinfo.data)
				if (res.data.admin == 1) {
					btn1Msg.value = '图书管理'
					btn2Msg.value = '用户管理'
				}
			})
		}
		getUserInfo()
		// 获取Cropper传来的base64数据
		const changeAvatar = (value) => {
			userinfo.data.picture = value
		}

		// 返回上一页
		const back = () => {
			router.push('/userMain')
		}
		return {
			userinfo,
			back,
			changeAvatar
		}
	},
}
</script >
 
<style lang='less' scoped>
.back{
    position: absolute;
    top: 10%;
    left: 20%;
}
.content {
	padding-top: 10%;
	display: flex;
	flex-direction: row;
    .cropper{
        position: relative;
        left: 42%;
    }
	.left {
		height: 800px;
		width: 640px;
		margin-left: 20%;
        padding: 1%;
        border: 1px solid rgb(198, 198, 198);
        border-radius: 1%;
        box-shadow: 3px 3px 5px rgb(198, 198, 198) ;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
		.buttonBox {
			width: 600px;
			position: relative;
			top: 2%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
	}
	img {
		margin-left: 8%;
	}
}
:deep(.el-descriptions__body) {
	width: 100%;
}
:deep(.el-descriptions__header) {
	width: 100%;
}
</style>